<template>
	<view class="content">
		<view v-for="booklist in booklists" :key="booklist.book_id">
			<navigator class="item" :url="'./bookinfo?bookid=' + booklist.book_id">
				<image class="fengmian" :src="'https://www.yedushu.cn/' + booklist.bimg"></image>
				<view class="text-area">
					<text class="bookname" selectable="true" user-select="true">{{booklist.book_name}}</text>
					<text class="other" selectable="true" user-select="true">{{booklist.zuozhe}} / {{booklist.chubanshe}} / {{booklist.chubannian}}</text>
				</view>
			</navigator>
		</view>
		<view v-if="isLoading" class="isload">加载更多...</view>
		<view v-else class="isend">~~ 我是有底线的 ~~</view>
	</view>
</template>

<script>
	export default {		
		data() {
			return {
				booklists: [],
				current_page: 1,
				catid: '',
				isLoading: false
			}
		},
		// 发送给朋友
		onShareAppMessage(res) {
			//if (res.from === 'button') {
			// // 来自页面内分享按钮
			// 	console.log(res.target)
			//}
			return {
				title: '夜读书-我们的精神角落！',
				path: '/pages/books/booklist'
			}
		},
		// 分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '夜读书-我们的精神角落！',
				imageUrl: "https://www.yedushu.cn/images/yedushu_sharp_logo.png"
			}
		},
		onLoad(option) {				
			this.isLoading = true;
			this.catid = option.catid;
			this.getCatBookList();
			// 标题显示分类名字
			uni.setNavigationBarTitle({
			    title: '分类：' + option.catname
			});
		},
		onPullDownRefresh() {
			// 下拉刷新
			// 清空数据
			this.booklists = [];
			// 获取第一页数据
			this.current_page = 1;
			// 开始获取数据
			this.getCatBookList();
		},
		onReachBottom() {
			// 上拉刷新
			// 获得当前页面
			this.current_page = this.current_page + 1;
			this.getCatBookList();
		},
		methods: {
			// getImgUrl(image){
			//    return "https://www.yedushu.cn/"+image;
			// },			
			getCatBookList() {
				var url = 'https://www.yedushu.cn/api/catbookslist/' + this.catid + '?page=' + this.current_page;				
				uni.request({
				    url: url, //书籍列表
				    success: (res) => {
				        // console.log(res.data);
						// console.log(res.data.data);
						// this.booklists = res.data.data;
						if(res.data.last_page > this.current_page)
						{
							this.isLoading = true;
						}
						// 当前以后数据连接新获取的数据
						this.booklists = this.booklists.concat(res.data.data);
						// 停止页面刷新动画
						uni.stopPullDownRefresh();
				    }
				});				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		padding: 10px 10px 0 10px;
	}
	.item {
		display: flex;
		padding: 15px 0px;
		border-bottom: 1px dashed #E8E8E8;
	}
	.fengmian {
		width: 80px;
		height: 108px;
	}
	.text-area {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 8px;
	}
	.bookname {
		font-size: 16px;
		color: #337ab7;
	}
	.other {
		font-size: 14px;
	}
	.isload {
		font-size: 14px;
		padding: 20px 0px;
		text-align: center;
	}
	.isend {
		font-size: 14px;
		padding: 10px 10px;
		text-align: center;		
	}
	.tophead {		
		margin: -10px -10px 0 -10px;
		padding: 50px 10px;
		background-color: #99cc99;
		text-align: center;
	}
	.tophead .catname {
		font-size: 20px;
		color: #FFFFFF;
	}
</style>
